<template>
  <div class="updateCategory">
    <el-dialog
              title="修改分类"
              :visible.sync="dialogVisible"
              width="400px"

            >
              <el-form  :data="updatefrom">
                <el-form-item label="*分类名称" :label-width="formLabelWidth">
                  <el-input
                    v-model="updatefrom.name"
                    style="width: 200px"
                    placeholder="请输入账号"
                  ></el-input>
                </el-form-item>
                <el-form-item label="*排序" :label-width="formLabelWidth">
                  <el-input
                    v-model="updatefrom.sort"
                    style="width: 200px"
                    placeholder="请输入员工姓名"
                  ></el-input>
                </el-form-item>

                <el-form-item label="*分类选择" :label-width="formLabelWidth">
                  <el-select  v-model="updatefrom.type" placeholder="请选择" style="width: 200px">
                  <el-option label="菜品分类"  value='1'> 菜品分类 </el-option>
                  <el-option label="套餐分类"  value='2'> 套餐分类 </el-option>
                </el-select>
                </el-form-item>

                <div style="pediting-top: 10px;width:330px" >

                  <el-button @click="savehandler(updatefrom)"
                    style="margin-left: 60px; width: 80px"
                    type="primary"
                    >保存</el-button
                  >
                  <el-button @click="cancel" style="margin-left: 100px; width: 80px" type="info"
                    >取消</el-button
                  >
                </div>
              </el-form>
   </el-dialog>
  </div>
</template>

<script>
import Bus1 from '@/utils/EventBus'
import { query, update } from '@/api/category'
export default {
  name: 'updateCategoryIndex',
  data () {
    return {

      updatefrom: {
        id: '',
        name: '',
        sort: '',
        type: ''

      }, // 弹窗数据

      dialogVisible: false,
      formLabelWidth: '80px',

      deptName: [], // 获取所有部门名称
      index: ''
    }
  },
  created () {
    /* 接收弹窗开关 */
    Bus1.$on('update', (dialogVisible, id) => {
      if (id !== undefined) {
        this.index = id
        this.dialogVisible = dialogVisible
      }
      this.init()
    })
  },
  /* 关闭对话 */
  beforeDestroy () {
    Bus1.$off('update')
  },
  methods: {
    async savehandler (updatefrom) {
      console.log(updatefrom.type, 'updatefrom.type')
      updatefrom.type = parseInt(updatefrom.type)
      console.log(updatefrom, 'updatefrom')
      const res = await update(updatefrom)

      if (res.code === 1) {
        this.dialogVisible = false
        this.$message.success('恭喜你，修改成功')

        location.reload()// 刷新
      }
    },
    // 根据id查询回显员工
    async init () {
      const res = await query(this.index)
      console.log(res.data)
      this.updatefrom = res.data
      if (res.data.status === 1) {
        this.updatefrom.type = '菜品分类'
      } else {
        this.updatefrom.type = '套餐分类'
      }
    },

    // 取消
    cancel () {
      this.dialogVisible = false
      this.updatefrom = ''
    }

  }

}
</script>

<style lang="less" secped>

  .avatar {
    width: 100px;
    height: 100px;

    display: block;
  }
 /deep/ .el-button.el-button--info{
    margin-left:10%;
}
.radiox{
  padding-left: 8px;
}

</style>
